<template>
  <div>
    <FormPanel ref="fromCust" :list="formCustList" :isSubmitBtn="false" :collapse="false" :labelWidth="130" :labelPosition="'top'"></FormPanel>
    <FormPanel ref="from" :list="formList" :isSubmitBtn="false" :collapse="false" :labelWidth="130" :labelPosition="'top'"> </FormPanel>
    <FilterTable ref="table" :columns="columns" :dataSource="tableList" height="auto" :isSelectColumn="false" :onColumnsChange="(columns) => (this.columns = columns)"> </FilterTable>
    <BaseDialog
      :visible.sync="isCustomerDetail"
      :title="customerDetailType === 'follow' ? '大客户跟进信息' : '大客户报备信息'"
      destroyOnClose
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }"
    >
      <customerDetail :type="customerDetailType" :rowData="bigCustomerData" @close="customerDetailcloseHandler" />
    </BaseDialog>
    <div style="height: 47px"></div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right',
      }"
    >
      <el-button @click="closeDrawer()">关 闭</el-button>
    </div>
  </div>
</template>
<script>
import { getOrderDetailType, getDetail } from '@/api/omSaleP/KeyCustomers/OrderSubmission/index.js';
import { dictionary } from '@/utils/dictMixin';
import Cookies from 'js-cookie';
import config from '@/assets/js/config';
import customerDetail from './customerDetail';
import moment from 'moment';
export default {
  props: ['rowData'],
  data() {
    this.saveData = null;
    this.Amount = null;
    return {
      formCustList: this.createdCustFrom(),
      formList: this.createdFrom(),
      columns: this.createdTable(),
      tableList: [],
      dealerCode: Cookies.get('ownerCode'),
      orderId: null,
      bigCustomerData: {},
      isCustomerDetail: false,
      customerDetailType: null,
    };
  },
  components: {
    customerDetail,
  },
  created() {
    //初始化省份数据
    this.initProvince();
    //初始化数据
    this.init();
    //获取订单细分类型数据
    this.getOrderDetailType();
  },
  mounted() {
    this.table = this.$refs.table.$refs.pageTable;
  },
  mixins: [dictionary],
  methods: {
    //初始化数据
    async init() {
      // console.log('传入数据',this.rowData);
      this.orderId = this.rowData['orderId'];
      //给表格赋值
      const res = await getDetail({ orderId: this.rowData.orderId });
      if (res.resultCode === 200) {
        for (let i in res.data) {
          this.formList.map((x) => {
            if (x.fieldName == i) {
              x.initialValue = res.data[i];
            }
          });
        }
        if (res.data.attachmentUrl) {
          this.formList.find((item) => item.fieldName == 'uploadFileData').initialValue.push({ name: res.data.attachmentName, url: res.data.attachmentUrl });
        }
        this.tableList = res.data.detailDTOList || [];
        this.bigCustomerData = res.data.bigCustomerDTO;
        let data = res.data.bigCustomerDTO;
        if (data) {
          this.formCustList.map(async (x) => {
            if (x.attachmentType) {
              data[x.fieldName].forEach((item) => {
                item.name = item.attachmentName;
                item.url = item.attachmentUrl;
                item.uid = item.attachmentUuid;
              });
            }
            if (data.provinceId) {
              await this.initCity(data.provinceId);
            }
            if (data.cityId) {
              await this.initRegion(data.cityId);
            }
            x.initialValue = data[x.fieldName];
          });
        }
        this.calculateOrderTotalAmount();
        // console.log(this.tableList);
      }
    },
    //获取订单细分类型
    async getOrderDetailType() {
      let res = await getOrderDetailType({ isAvailable: 10041001 });
      // console.log('订单明细类型', res);
      if (res.resultCode == 200) {
        if (res.data.length > 0) {
          res.data.map((x) => {
            this.formList.find((item) => item.fieldName == 'orderDetailType').itemList.push({ text: x.subName, value: x.subId });
          });
        }
      }
    },
    //初始化所在省份
    async initProvince() {
      let pl = await this.createRegionsList();
      this.formCustList.find((item) => item.fieldName == 'provinceId').itemList = pl;
    },
    //初始化所在市数据
    async initCity(provinceId) {
      //清空市
      this.clearFormItem(this.formCustList.find((item) => item.fieldName == 'cityId'));
      this.clearFormItem(this.formCustList.find((item) => item.fieldName == 'districtId'));
      if (!provinceId || provinceId == null || typeof provinceId == 'undefined') {
        return;
      }
      //取城市数据
      let rd = this.createcityList(provinceId);
      this.formCustList.find((item) => item.fieldName == 'cityId').itemList = rd;
    },
    // 获取区县
    async initRegion(regionId) {
      this.clearFormItem(this.formCustList.filter((x) => x.fieldName === 'districtId')[0]);
      if (!regionId) return;
      let rd = this.district(regionId);
      this.formCustList.find((item) => item.fieldName == 'districtId').itemList = rd;
    },
    // 清除
    clearFormItem(item) {
      item.initialValue = undefined;
      item.itemList = [];
    },
    //订单总金额计算
    calculateOrderTotalAmount() {
      let orderTotalAmount = 0;
      this.tableList.map((x) => {
        orderTotalAmount = orderTotalAmount + Number(x.orderNum) * Number(x.afterDiscountAmount);
      });
      this.formList.find((item) => item.fieldName == 'orderTotalAmount').initialValue = Number(orderTotalAmount).toFixed(2);
    },
    //数据校验
    checkValueNum(a) {
      if (!a || a == null || isNaN(a)) {
        return 0;
      } else {
        return a;
      }
    },
    //大客户报备/大客户需求信息查看
    editHandle(type) {
      if (type === 'demand') {
        this.customerDetailType = type;
        this.isCustomerDetail = true;
      } else if (type == 'follow') {
        this.customerDetailType = type;
        this.isCustomerDetail = true;
      }
    },
    customerDetailcloseHandler() {
      this.isCustomerDetail = false;
    },
    closeDrawer() {
      this.$emit('close');
    },
    formatNumber(val) {
      return Number(val).toFixed(2);
    },
    createdCustFrom() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '大客户报备信息',
        },
        {
          type: 'INPUT',
          label: '大客户编号',
          fieldName: 'customersNo',
          disabled: true,
        },
        {
          type: 'SELECT',
          label: '大客户来源',
          fieldName: 'customersType',
          disabled: true,
          initialValue: 21081001,
          itemList: this.createDictList('2108'),
        },
        {
          type: 'SELECT',
          label: '大客户类型',
          disabled: true,
          fieldName: 'customerType',
          initialValue: 21171002,
          itemList: this.createDictList('2117'),
        },
        {
          type: 'INPUT',
          label: '大客户名称',
          disabled: true,
          fieldName: 'customersName',
        },
        {
          type: 'INPUT',
          label: '运营单位联系人',
          disabled: true,
          fieldName: 'contactsName',
        },
        {
          type: 'INPUT',
          label: '运营单位联系电话',
          disabled: true,
          fieldName: 'customerPhone',
        },
        {
          type: 'SELECT',
          label: '省份',
          disabled: true,
          fieldName: 'provinceId',
          placeholder: '',
          initialValue: '',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '城市',
          disabled: true,
          fieldName: 'cityId',
          placeholder: '',
          initialValue: '',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '县区',
          disabled: true,
          fieldName: 'districtId',
          placeholder: '',
          initialValue: '',
          itemList: [],
        },
        {
          type: 'INPUT',
          label: '联系地址',
          disabled: true,
          fieldName: 'addressName',
          placeholder: '',
        },
        {
          type: 'SELECT',
          label: '证件类型',
          fieldName: 'credentialsType',
          disabled: true,
          initialValue: 21201008,
          itemList: this.createDictList('2120'),
        },
        {
          type: 'INPUT',
          label: '证件号',
          fieldName: 'credentialsNo',
          disabled: true,
        },
        {
          type: 'INPUT',
          label: '法人代表姓名',
          fieldName: 'legalPersonName',
          disabled: true,
        },
        {
          type: 'INPUT',
          label: '法人身份证号',
          fieldName: 'legalPersonIdCard',
          disabled: true,
        },
        {
          type: 'INPUT',
          label: '法人代表手机',
          fieldName: 'legalPersonMobile',
          disabled: true,
        },
        {
          type: 'INPUT',
          label: '授权人身份证号',
          fieldName: 'authorizationPersonIdCard',
          disabled: true,
        },
        {
          type: 'INPUT',
          label: '传真',
          fieldName: 'fax',
          disabled: true,
        },
        {
          type: 'INPUT',
          label: '邮编',
          fieldName: 'zipCode',
          disabled: true,
        },
        {
          type: 'INPUT',
          label: 'SAP客户编号',
          fieldName: 'sapCustomersNo',
          disabled: true,
        },
        {
          type: 'SELECT',
          label: '是否绑定SAP客户编号',
          fieldName: 'isBind',
          disabled: true,
          placeholder: '',
          itemList: this.createDictList('1004'),
          offsetRightCols: 1,
        },
        {
          type: 'BREAK_SPACE',
          label: '',
        },
        {
          type: 'UPLOAD_FILE',
          label: '法人身份证正面',
          fieldName: 'legalPersonIdCodeFrontList',
          attachmentType: 11131001,
          selfCols: 1,
          initialValue: [],
          disabled: true,
          upload: {
            actionUrl: `${config.uploadUrl}/api/file/oss/upload`,
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true,
          },
        },
        {
          type: 'UPLOAD_FILE',
          label: '法人身份证反面',
          fieldName: 'legalPersonIdCodeReverseList',
          attachmentType: 11131002,
          selfCols: 1,
          initialValue: [],
          disabled: true,
          upload: {
            actionUrl: `${config.uploadUrl}/api/file/oss/upload`,
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true,
          },
        },
        {
          type: 'UPLOAD_FILE',
          label: '管理员授权文件',
          attachmentType: 11131003,
          fieldName: 'administratorAuthorizationFileList',
          selfCols: 1,
          initialValue: [],
          disabled: true,
          upload: {
            actionUrl: `${config.uploadUrl}/api/file/oss/upload`,
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true,
          },
        },
        {
          type: 'UPLOAD_FILE',
          label: '授权人身份证正面',
          attachmentType: 11131004,
          fieldName: 'authorizationIdCardFrontList',
          selfCols: 1,
          initialValue: [],
          disabled: true,
          upload: {
            actionUrl: `${config.uploadUrl}/api/file/oss/upload`,
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true,
          },
        },
        {
          type: 'UPLOAD_FILE',
          label: '授权人身份证反面',
          attachmentType: 11131005,
          fieldName: 'authorizationIdCardReverseList',
          selfCols: 1,
          initialValue: [],
          disabled: true,
          upload: {
            actionUrl: `${config.uploadUrl}/api/file/oss/upload`,
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true,
          },
        },
        {
          type: 'UPLOAD_FILE',
          label: '营业执照',
          fieldName: 'businessLicenseList',
          attachmentType: 11131006,
          selfCols: 1,
          initialValue: [],
          disabled: true,
          upload: {
            actionUrl: `${config.uploadUrl}/api/file/oss/upload`,
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true,
          },
        },
        {
          type: 'INPUT',
          label: '需求信息',
          render: () => {
            return (
              <multiuse-button size="mini" type="text" onClick={() => this.editHandle('demand')}>
                查看
              </multiuse-button>
            );
          },
        },
        {
          type: 'INPUT',
          label: '跟进信息',
          render: () => {
            return (
              <multiuse-button size="mini" type="text" onClick={() => this.editHandle('follow')}>
                查看
              </multiuse-button>
            );
          },
        },
      ];
    },
    createdFrom() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '大客户订单信息',
        },
        {
          type: 'INPUT',
          label: '订单编号',
          fieldName: 'orderNo',
          disabled: true,
        },
        {
          type: 'DATE',
          label: '订单年月',
          fieldName: 'orderYearMonth',
          dateType: 'month',
          disabled: true,
        },
        {
          type: 'SELECT',
          label: '订单类型',
          fieldName: 'orderType',
          itemList: this.createDictList('2105'),
          disabled: true,
        },
        {
          type: 'SELECT',
          label: '订单细分类型',
          fieldName: 'orderDetailType',
          itemList: [],
          disabled: true,
        },
        {
          type: 'SELECT',
          label: '订单状态',
          fieldName: 'orderStatus',
          itemList: this.createDictList('2104'),
          disabled: true,
        },
        {
          type: 'SELECT',
          label: '紧急度',
          fieldName: 'emergencyType',
          itemList: this.createDictList('2101'),
          disabled: true,
        },
        {
          type: 'SELECT',
          label: '运输方式',
          fieldName: 'transportType',
          itemList: this.createDictList('2409'),
          disabled: true,
        },
        {
          type: 'INPUT',
          label: '收车地址',
          fieldName: 'address',
          disabled: true,
        },
        {
          type: 'INPUT',
          label: '送达城市',
          fieldName: 'orderCity',
          disabled: true,
        },
        {
          type: 'INPUT',
          label: '联系人',
          fieldName: 'linkMan',
          disabled: true,
        },
        {
          type: 'INPUT',
          label: '联系电话',
          fieldName: 'linkPhone',
          disabled: true,
        },
        {
          type: 'SELECT',
          label: '开票类型',
          fieldName: 'invoiceType',
          itemList: this.createDictList('2107'),
          disabled: true,
        },
        {
          type: 'INPUT',
          label: '订单总金额',
          fieldName: 'orderTotalAmount',
          numberFormat: true,
          disabled: true,
        },
        {
          type: 'UPLOAD_FILE',
          label: '附件上传',
          fieldName: 'uploadFileData',
          initialValue: [],
          disabled: true,
          upload: {
            actionUrl: `${config.uploadUrl}/api/file/oss/upload`,
            limit: 1,
            fileSize: 20,
          },
          selfCols: 3,
        },
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '物料编码',
          dataIndex: 'productCode',
          sorter: true,
          filter: true,
          width: 200,
          filterType: 'input',
        },
        {
          title: '物料描述',
          dataIndex: 'productName',
          sorter: true,
          filter: true,
          width: 400,
          filterType: 'input',
        },
        {
          title: '提报数量',
          dataIndex: 'orderNum',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '车辆用途',
          dataIndex: 'vehicleUse',
          sorter: true,
          filter: true,
          filterType: 'input',
          disabled: true,
          render: (p) => {
            return <span>{this.createDictText(p.row.vehicleUse, '2102')}</span>;
          },
        },
        {
          title: '采购价格',
          dataIndex: 'afterDiscountAmount',
          sorter: true,
          filter: true,
          width: 120,
          precision: 2,
          numberFormat: true,
          align: 'right',
          filterType: 'input',
        },
        {
          title: '市场指导价',
          dataIndex: 'singleAmount',
          sorter: true,
          filter: true,
          align: 'right',
          precision: 2,
          numberFormat: true,
          align: 'right',
          filterType: 'input',
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '配置',
          dataIndex: 'configName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '选装',
          dataIndex: 'optionName',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '内饰',
          dataIndex: 'trimName',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '外饰',
          dataIndex: 'colorName',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
      ];
    },
  },
};
</script>
<style lang="less">
.discount {
  text-decoration: underline;
  color: #d1291a;
  cursor: pointer;
}
.upload-btn {
  width: 100%;
}
.el-upload-list__item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding-right: 20px;
  box-sizing: border-box;
}
</style>
